<template>
	<view id="all" :style="{width:size+'rpx',height: size+'rpx',transform:'scale('+zoom+')'}"  >
		<view class='qt' id="k1" :style="{
									float: 'left',
									width: ((100-gap*2)/3)+'%',
									height: ((100-gap*2)/3)+'%',
									marginBottom: gap+'%' 
								}">
			<image :src="url" mode="top left"></image>
		</view>
		<view class='qt' id="k2" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}" >
			<image :src="url" mode="top"></image>
		</view>
		<view class='qt' id="k3" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}">
			<image :src="url" mode="top right"></image>
		</view>
		<view class='qt' id="k4" :style="{
									float: 'left',
									width: ((100-gap*2)/3)+'%',
									height: ((100-gap*2)/3)+'%',
									marginBottom: gap+'%' 
								}">
			<image :src="url" mode="left"></image>
		</view>
		<view class='qt' id="k5" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}" >
			<image :src="url" mode="center"></image>
		</view>
		<view class='qt' id="k6" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}" >
			<image :src="url" mode="right"></image>
		</view>
		<view class='qt' id="k7" :style="{
									float: 'left',
									width: ((100-gap*2)/3)+'%',
									height: ((100-gap*2)/3)+'%',
									marginBottom: gap+'%' 
								}">
			<image :src="url" mode="bottom left"></image>
		</view>
		<view class='qt' id="k8" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}" >
			<image :src="url" mode="bottom"></image>
		</view>
		<view class='qt' id="k9" :style="{float: 'left',
								width: ((100-gap*2)/3)+'%',
								height: ((100-gap*2)/3)+'%',
								marginBottom: gap+'%',
								marginLeft: gap+'%',}" >
			<image :src="url" mode="bottom right"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"gggqt",
		data() {
			return {

			};
		},
		props:{
			url:{
				required:true,
				type:String,
				default(){
					return '';
				}
			},
			size:{
				required:true,
				type:String,
				default(){
					return '750';
				}
			},
			zoom:{
				required:true,
				type:Number,
				default(){
					return 1;
				}
			},
			gap:{
				required:true,
				type:Number,
				default(){
					return 0.5;
				}
			}
		},
		created() {
			// var img = new Image;
			// img.src = this.url;
			// img.width = '750rpx';
			// img.height = '750rpx';
			// console.log('aa',this.url)
		}
	}
</script>

<style>
#all{
	
}
.qt image{
	width: 100%;
	height: 100%;

}
.qt{
	
}
</style>
